<template>
	<div class="enable2fa flex flex-col md:flex-row p-5 bg-bg-1 rounded-lg">
		<div class="flex-auto">
			<div class="mb-2 text-lg">{{ $t('settings.security.2fa') }}</div>
			<BaseTip textT="settings.security.2faDesc" />
		</div>
		<BaseButton
			class="mt-5 md:mt-0"
			type="primary"
			:block="!isDesktop"
			:textT="button.textT"
			@click="button.click()" />
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { BaseButton, BaseTip } from '@/components/base'
import { isDesktop, useDialog } from '@/hooks'
import { useProfileStore } from '@/store'

const profileStore = useProfileStore()
const dialog = useDialog()
const button = computed(() => {
	const enabled = !profileStore.userInfo?.enable2fa
	return {
		textT: enabled ? 'settings.security.2faBtn' : 'settings.security.2faBtn2',
		click: () => {
			if (profileStore.userInfo) {
				const { email, emailVerify, mobile, mobileVerify } = profileStore.userInfo
				if (emailVerify || mobileVerify) {
					enabled ? (profileStore.show.enable2fa = true) : (profileStore.show.disable2fa = true)
				} else if (email) {
					dialog.warning({
						titleT: 'settings.security.2faEmailTitle',
						contentT: 'settings.security.2faEmailContent',
						cancelShow: false,
						confirmTextT: 'settings.kyc.Verify',
						confirmFn: () => (profileStore.show.email = true)
					})
				} else if (mobile) {
					dialog.warning({
						titleT: 'settings.security.2faMobileTitle',
						contentT: 'settings.security.2faMobileContent',
						cancelShow: false,
						confirmTextT: 'settings.kyc.Verify',
						confirmFn: () => (profileStore.show.mobile = true)
					})
				}
			}
		}
	}
})
</script>

<style scoped></style>
